<template>
	<view class="activities-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<text class="placeholder">搜索活动、地点、类型</text>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" :class="{ active: selectedType === 'all' }" @click="selectType('all')">
				<text>全部</text>
			</view>
			<view class="filter-item" :class="{ active: selectedType === 'recommend' }"
				@click="selectType('recommend')">
				<text>推荐</text>
			</view>
			<view class="filter-item" :class="{ active: selectedType === 'online' }" @click="selectType('online')">
				<text>线上</text>
			</view>
			<view class="filter-item" :class="{ active: selectedType === 'offline' }" @click="selectType('offline')">
				<text>线下</text>
			</view>
		</view>

		<!-- 活动列表 -->
		<view class="activity-list">
			<view class="activity-item" v-for="(activity, index) in filteredActivities" :key="index"
				@click="goToDetail(activity.id)">
				<!-- 活动图片 -->
				<image :src="activity.image" mode="aspectFill" class="activity-image"></image>

				<!-- 活动信息 -->
				<view class="activity-info">
					<text class="activity-title">{{ activity.title }}</text>

					<!-- 活动标签 -->
					<view class="activity-tags">
						<view class="tag" v-for="(tag, tagIndex) in activity.tags" :key="tagIndex">
							<text>{{ tag }}</text>
						</view>
					</view>

					<!-- 活动详情 -->
					<view class="activity-details">
						<view class="detail-item">
							<text class="icon-emoji">🕒</text>
							<text class="detail-text">{{ activity.time }}</text>
						</view>
						<view class="detail-item">
							<text class="icon-emoji">📍</text>
							<text class="detail-text">{{ activity.location }}</text>
						</view>
					</view>

					<!-- 价格和参与人数 -->
					<view class="activity-footer">
						<view class="price">
							<text class="price-symbol">¥</text>
							<text class="price-value">{{ activity.price }}</text>
						</view>
						<view class="participants">
							<text class="participant-count">{{ activity.participants }}人已报名</text>
							<view class="avatar-group">
								<image :src="avatar" mode="aspectFill" class="avatar"
									v-for="(avatar, avatarIndex) in activity.avatars" :key="avatarIndex"></image>
							</view>
						</view>
					</view>

					<!-- 活动状态 -->
					<view class="activity-status" :class="activity.status">
						<text>{{ activity.statusText }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text @click="loadMore">加载更多</text>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="filteredActivities.length === 0">
			<text class="empty-icon">🎯</text>
			<text class="empty-text">暂无相关活动</text>
		</view>

		<!-- 发布活动按钮 -->
		<view class="publish-button" @click="goToPublish">
			<text class="publish-icon">+</text>
		</view>
		
		<!-- 底部tabbar -->
		<view class="tabbar">
			<BottomTabbar theme="light" :value="1" :color="'#892FE8'" />
		</view>
	</view>
</template>

<script setup>
	import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"
	import {
		ref,
		computed,
		onMounted
	} from 'vue';

	// 筛选状态
	const selectedType = ref('all');
	const searchQuery = ref('');
	const hasMore = ref(true);

	// 活动数据
	const activities = ref([{
			id: 1,
			title: '周末户外徒步登山活动',
			image: '/static/avatar/1.jpg',
			tags: ['户外', '徒步', '周末'],
			time: '周六 09:00-16:00',
			location: '北京香山公园',
			price: 30,
			participants: 28,
			avatars: ['/static/avatar/1.jpg', '/static/avatar/2.jpg', '/static/avatar/3.jpg'],
			status: 'hot',
			statusText: '热门'
		},
		{
			id: 2,
			title: '线上编程技术分享会',
			image: '/static/avatar/2.jpg',
			tags: ['线上', '技术', '分享'],
			time: '周五 19:30-21:00',
			location: '线上直播',
			price: 0,
			participants: 156,
			avatars: ['/static/avatar/4.jpg', '/static/avatar/5.jpg', '/static/avatar/1.jpg'],
			status: 'new',
			statusText: '新活动'
		},
		{
			id: 3,
			title: '城市摄影爱好者交流会',
			image: '/static/avatar/3.jpg',
			tags: ['摄影', '交流', '周末'],
			time: '周日 14:00-17:00',
			location: '上海外滩',
			price: 50,
			participants: 16,
			avatars: ['/static/avatar/2.jpg', '/static/avatar/3.jpg', '/static/avatar/4.jpg'],
			status: 'normal',
			statusText: ''
		},
		{
			id: 4,
			title: '瑜伽冥想放松课程',
			image: '/static/avatar/4.jpg',
			tags: ['瑜伽', '冥想', '健身'],
			time: '周四 18:00-19:30',
			location: '广州天河区瑜伽馆',
			price: 88,
			participants: 8,
			avatars: ['/static/avatar/5.jpg', '/static/avatar/1.jpg', '/static/avatar/2.jpg'],
			status: 'normal',
			statusText: ''
		},
		{
			id: 5,
			title: '读书会 - 现代文学赏析',
			image: '/static/avatar/5.jpg',
			tags: ['阅读', '文学', '交流'],
			time: '周六 15:00-17:00',
			location: '深圳南山区图书馆',
			price: 20,
			participants: 12,
			avatars: ['/static/avatar/3.jpg', '/static/avatar/4.jpg', '/static/avatar/5.jpg'],
			status: 'normal',
			statusText: ''
		}
	]);

	// 计算过滤后的活动列表
	const filteredActivities = computed(() => {
		return activities.value.filter(activity => {
			// 类型筛选
			if (selectedType.value !== 'all') {
				if (selectedType.value === 'recommend' && activity.status !== 'hot' && activity.status !==
					'new') {
					return false;
				}
				if (selectedType.value === 'online' && activity.location !== '线上直播') {
					return false;
				}
				if (selectedType.value === 'offline' && activity.location === '线上直播') {
					return false;
				}
			}

			// 搜索筛选
			if (searchQuery.value && !activity.title.includes(searchQuery.value) &&
				!activity.location.includes(searchQuery.value) &&
				!activity.tags.some(tag => tag.includes(searchQuery.value))) {
				return false;
			}

			return true;
		});
	});

	// 选择活动类型
	const selectType = (type) => {
		selectedType.value = type;
	};

	// 跳转到活动详情页
	const goToDetail = (id) => {
		uni.navigateTo({
			url: `/pages_event/detail?id=${id}`
		});
	};

	// 跳转到发布活动页
	const goToPublish = () => {
		uni.navigateTo({
			url: '/pages_event/publish'
		});
	};

	// 加载更多
	const loadMore = () => {
		// 模拟加载更多数据
		setTimeout(() => {
			hasMore.value = false;
			uni.showToast({
				title: '没有更多活动了',
				icon: 'none'
			});
		}, 500);
	};

	// 页面挂载
	onMounted(() => {
		console.log('活动页面已加载');
	});
	
	onPullDownRefresh(() => {
		console.log("下拉刷新")
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log("上拉加载更多")
	})
</script>

<style scoped lang="scss">
	/* 全局变量 */
	$primary-color: #7C3AED;
	$bg-color: #f3f4f6;
	$white: #ffffff;
	$text-primary: #1F2937;
	$text-secondary: #6B7280;
	$border-color: #E5E7EB;

	.activities-container {
		background-color: $bg-color;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 搜索栏 */
	.search-bar {
		padding: 20rpx 30rpx;
		background-color: $white;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.search-input {
		display: flex;
		align-items: center;
		background-color: $bg-color;
		border-radius: 36rpx;
		padding: 20rpx 30rpx;
	}

	.search-icon {
		font-size: 28rpx;
		color: #9CA3AF;
		margin-right: 10rpx;
	}

	.placeholder {
		margin-left: 10rpx;
		color: #9CA3AF;
		font-size: 28rpx;
	}

	/* 筛选栏 */
	.filter-bar {
		display: flex;
		background-color: $white;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid $border-color;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.filter-item {
		padding: 24rpx 32rpx;
		position: relative;

		&:active {
			background-color: rgba($primary-color, 0.05);
		}
	}

	.filter-item.active text {
		color: $primary-color;
		font-weight: 500;
	}

	.filter-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 24rpx;
		height: 4rpx;
		background-color: $primary-color;
		border-radius: 2rpx;
	}

	/* 活动列表 */
	.activity-list {
		padding: 0 20rpx;
		// 增加底部内边距避免被tabBar遮挡，特别是在安卓设备上
		padding-bottom: 60rpx;
	}

	.activity-item {
		background-color: $white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		&:active {
			transform: scale(0.98);
		}
	}

	.activity-image {
		width: 100%;
		height: 400rpx;
	}

	.activity-info {
		padding: 24rpx;
	}

	.activity-title {
		font-size: 32rpx;
		font-weight: 600;
		color: $text-primary;
		margin-bottom: 16rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.activity-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.tag {
		background-color: rgba($primary-color, 0.1);
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
		margin-right: 12rpx;
		margin-bottom: 12rpx;
	}

	.tag text {
		font-size: 22rpx;
		color: $primary-color;
	}

	.activity-details {
		display: flex;
		margin-bottom: 20rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}

	.icon-emoji {
		font-size: 24rpx;
		color: #6B7280;
		margin-right: 8rpx;
	}

	.detail-text {
		font-size: 24rpx;
		color: $text-secondary;
	}

	.activity-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		display: flex;
		align-items: baseline;
	}

	.price-symbol {
		font-size: 24rpx;
		color: #EF4444;
		font-weight: 500;
	}

	.price-value {
		font-size: 36rpx;
		color: #EF4444;
		font-weight: 700;
	}

	.participants {
		display: flex;
		align-items: center;
	}

	.participant-count {
		font-size: 24rpx;
		color: $text-secondary;
		margin-right: 12rpx;
	}

	.avatar-group {
		display: flex;
	}

	.avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid $white;
		margin-left: -10rpx;
	}

	/* 活动状态 */
	.activity-status {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: $white;

		&.hot {
			background-color: #EF4444;
		}

		&.new {
			background-color: #10B981;
		}
	}

	/* 加载更多 */
	.load-more {
		text-align: center;
		padding: 40rpx 0;
		color: $text-secondary;
		font-size: 28rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 160rpx 0;
	}

	.empty-text {
		margin-top: 30rpx;
		color: #9CA3AF;
		font-size: 32rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		color: #D1D5DB;
	}

	/* 发布按钮 */
	.publish-button {
		position: fixed;
		bottom: 160rpx;
		right: 40rpx;
		width: 120rpx;
		height: 120rpx;
		background-color: $primary-color;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 24rpx rgba($primary-color, 0.4);
	}

	.publish-icon {
		font-size: 60rpx;
		color: #FFFFFF;
		font-weight: bold;
		line-height: 1;
	}

	/* 响应式适配 */
	@media screen and (max-width: 320px) {
		.activity-image {
			height: 320rpx;
		}
	}

	@media screen and (min-width: 768px) {
		.activities-container {
			max-width: 750rpx;
			margin: 0 auto;
		}
	}
</style>